<template>
  <div class="home">
    <van-nav-bar fixed title="新增订单"/>
    <div>
      <van-cell-group>
        <van-field required clearable label="订单编号" placeholder="请输入订单编号"/>
        <van-cell
                required
                title="外商国别"
                @click="clickHandle(1)"
                v-model="value1"
                is-link
                value="请选外商国别"
        />
        <van-cell
                required
                title="订单日期"
                @click="clickHandle(2)"
                v-model="value2"
                is-link
                value="请选择订单日期"
        />
        <van-cell required title="交货日期" @click="clickHandle(3)" is-link value="请选择交货日期"/>
        <van-cell required title="抵运国" @click="clickHandle(4)" is-link value="请选择抵运国"/>
        <van-cell required title="订单币种" @click="clickHandle(5)" is-link value="请选择订单币种"/>

        <van-popup v-model="show" position="bottom" :overlay="true">
          <van-picker @confirm="onConfirm" @cancel="onCancel" show-toolbar :columns="columns"/>
        </van-popup>

        <van-popup v-model="show" position="bottom" :overlay="true">
          <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate"/>
        </van-popup>

        <van-cell title="报关地海关" is-link value="请选择报关地海关"/>
        <van-cell title="起运港" is-link value="请选择起运港"/>
        <van-cell title="目的港" is-link value="请选择目的港"/>
        <van-cell title="收汇方式" is-link value="请选择收汇方式"/>
        <van-cell title="贸易方式" is-link value="请选择贸易方式"/>
        <van-cell title="价格条款" is-link value="请选择价格条款"/>
        <van-cell title="包装种类" is-link value="请选择包装种类"/>
        <van-cell title="运输方式" is-link value="请选择运输方式"/>
      </van-cell-group>
      <van-cell-group>
        <van-field label="备注" type="textarea" placeholder="请输入备注"/>
      </van-cell-group>
      <van-cell-group>
        <van-field label="关联报关单" type="textarea" placeholder="请输入备注"/>
      </van-cell-group>
      <div style="text-align: center">
        <van-button type="primary" size="normal">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
    // @ is an alias to /src
    import Qs from 'qs';
    import {NavBar, Cell, Field, Picker, DatetimePicker} from "vant";
    import Vue from "vue";
    import axios from  'axios'

    var API = "http://47.96.125.159:8010";
    Vue.use(NavBar)
        .use(Cell)
        .use(Picker)
        .use(DatetimePicker)
        .use(Field);

    export default {
        name: "home",
        data() {
            return {
                baseUrl: "47.96.125.159:8010",
                value1: "",
                show: false,
                columns: [],
                arr1: [],
                arr2: []
            };
        },
        created() {
            this.init_select_data();
        },
        methods: {
            clickHandle(type) {
                this.show = true;
            },
            /*获取国家*/
            init_select_data() {
                let arr = [
                    "3003",
                    "3008",
                    "3001",
                    "3011",
                    "3005",
                    "3009",
                    "3010",
                    "3004"
                ];
                /*请求货币种类 */
                var tmp = {
                    configTypeId: 3003,
                    delFlag: "0",
                    pageLimit: 1000,
                    token:
                        "12524C533852734C4B0F865A64_51B1C5B25046F1A13111A2077_2cDo6m7pDaDn.y."
                };
                axios
                    .post(API + "/api/1.0/base/s901060parameter/list", Qs.stringify(tmp), {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                        }
                    })
                    .then(res => {
                        console.log(res.data);
                        if (res.data.code == 0) {
                            let data = res.data.data;
                            for (let i = 0; i < data.length; i++) {
                                this.arr1.push(data[i].configValue);
                                this.columns = this.arr1;
                            }
                        }
                    });
                /*请求收款方式 */
                var tmp = {
                    configTypeId: 3009,
                    delFlag: "0",
                    pageLimit: 1000,
                    token:
                        "12524C533852734C4B0F865A64_51B1C5B25046F1A13111A2077_2cDo6m7pDaDn.y."
                };
                axios.post(API + "/api/1.0/base/s901060parameter/list", Qs.stringify(tmp), {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                    }
                })
                    .then(res => {
                        if (res.data.code == 0) {
                            console.log(res.data);
                        }
                    });
            },
            onConfirm(value) {
                let that = this;
                that.value1 = value;
                that.show = false;
            },
            onCancel() {
                let that = this;
                that.show = false;
            }
        }
    };
</script>

<style scoped>
  button {
    margin-top: 20px;
    min-width: 200px;
    background-color: #1989fa;
    border-color: #1989fa;
  }

  .home {
    padding-top: 60px;
    padding-bottom: 20px;
  }

  .van-nav-bar {
    background-color: #1989fa;
    color: #fff;
  }
</style>